﻿<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>花瓣图片 瀑布流 免登陆</title>
	<!-- CDN -->
	<link href="https://cdn.staticfile.org/normalize/8.0.1/normalize.min.css" rel="stylesheet">
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
	<script src="https://cdn.staticfile.org/masonry/4.2.2/masonry.pkgd.min.js"></script>
	<script src="https://cdn.staticfile.org/animejs/2.2.0/anime.min.js"></script>
	<script src="https://cdn.staticfile.org/urljs/2.3.1/url.min.js"></script>
	<!-- 自定义 -->
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<script src="js/main.js"></script>
</head>

<body class="loading">
	<main id="app">
		<header class="codrops-header">
			<div class="codrops-header__title">
				<input v-model="query" type="text" placeholder="搜索你喜欢的" value="">
				<button @click="search()">查询</button>
				<button @click="next()">下一页</button>
			</div>
		</header>
		<div class="content content--side content--right">
			<div class="control control--effects">
				<span class="control__title">run effect</span>
				<button class="control__btn" data-fx="Hapi">Hapi</button>
				<button class="control__btn" data-fx="Amun">Amun</button>
				<button class="control__btn" data-fx="Kek">Kek</button>
				<button class="control__btn" data-fx="Isis">Isis</button>
				<button class="control__btn" data-fx="Montu">Montu</button>
				<button class="control__btn" data-fx="Osiris">Osiris</button>
				<button class="control__btn" data-fx="Satet">Satet</button>
				<button class="control__btn" data-fx="Atum">Atum</button>
				<button class="control__btn" data-fx="Ra">Ra</button>
				<button class="control__btn" data-fx="Sobek">Sobek</button>
				<button class="control__btn" data-fx="Ptah">Ptah</button>
				<button class="control__btn" data-fx="Bes">Bes</button>
				<button class="control__btn" data-fx="Seker">Seker</button>
				<button class="control__btn" data-fx="Nut">Nut</button>
				<button class="control__btn" data-fx="Shu">Shu</button>
			</div>
		</div>
		<div class="content content--center">
			<div id="list" class="grid grid--type-a">
				<div class="grid__sizer"></div>
				<div v-for="item,key in pins" :key="key" class="grid__item">
					<a :href="item" class="grid__link" target="_blank">
						<img class="grid__img" :src="item+'_fw236'" onerror="javascript:$(this).remove();" />
					</a>
				</div>
			</div>
		</div>
	</main>
	<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
		<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
	</div>

	<script type="text/javascript">
		// 代理ajax
		function proxyAjax(url,data,callback) {
			$.ajax({
				url:'http://192.168.2.94:8081/api/post',
				type:'GET',
				contentType: "application/json; charset=utf-8;",
				data: data,
				beforeSend: function (XMLHttpRequest) {
					XMLHttpRequest.setRequestHeader("Proxy", url);
				},
				success:function(result,textStatus,jqXHR){
					if(textStatus==="success"){
						typeof callback=="function" ? callback(result) : null;
					}else{
						console.error("接口访问失败", result, textStatus, jqXHR);
					}
				},
				error:function(result,textStatus,jqXHR){
					console.error("代理服务器访问失败", result, textStatus, jqXHR);
				}
			});
		}

		var v$app = new Vue({
			el: "#app",
			data: {
				query: "壁纸", page: 1, size: 30,
				pins: []
			},
			mounted: function () {
				//首次渲染完成
				_this = this;
				_this.$nextTick(function () {
					_this.getPins();
				});
			},
			methods: {
				search() {
					this.page = 1; this.pins = [];
					_this.$nextTick(function () {
						_this.getPins();
					});
				},
				next(){
					_this.page = _this.page + 1;
					_this.getPins();
				},
				renderPins(re) {
					// 解析接口数据
					$(re).find("body").prevObject.filter(function(i,e){
						return e.nodeName=="SCRIPT"&&!e.src&&e.innerText.indexOf('app.page["pins"]')>=0?e:null;
					}).each(function(i,e){
						new Function(e.innerText.replace("app.route();","window.parseSuccess(app);"))();
					});
				},
				getPins() {
					_this = this;
					var querystring = Url.stringify({
						q: _this.query,
						page: _this.page,
						per_page: _this.size,
						// category: "beauty"
					});
					var url = /^http/g.test(_this.query) ? _this.query : ["http://huaban.com/search/", querystring].join("?");
					console.log(url)
					proxyAjax(url, null, _this.renderPins);
				}
			}
		});
		// 花瓣数据解析完成事件
		window.parseSuccess = parseSuccess = function(app){
			var $view = $("#view").html(""), pins = app&&app.page ? app.page.pins : [];
			var pins = pins.map(function(e,i){
				var src = ["http://img.hb.aicdn.com/", e.file.key].join("");
				return `http://192.168.2.94:8081/api/get?proxy=${encodeURIComponent(src)}`;
			});
			v$app.pins = pins; //v$app.pins.concat(pins);
			// 展示动画特效插件
			v$app.$nextTick(function (e) {
				window.init(document.body);
			});
		}
	</script>
</body>

</html>